<template>
  <div>
    <div>
      <van-nav-bar title="冰箱" left-arrow @click-left="entrance">
        <template #right>
          <van-icon name="ellipsis" />
        </template>
      </van-nav-bar>
    </div>
    <div class="my_dianbox">
      <div>
        <span>电量</span>
      </div>
      <div class="my_xiaobox">
        <div class="my_dian">
          <van-circle v-model:current-rate="currentRate" :rate="rate" :color="gradientColor" :text="text" />
          <div class="my_dian1">
            <div>375w</div>
            <div class="my_ri">今日电量消耗</div>
          </div>
        </div>
        <div class="my_right">
          <van-icon name="arrow" @click="Power" />
        </div>
      </div>
      <div class="my_shishe">
        <div>
          时间设置
        </div>
        <div class="my_shifont">
          <div class="my_fontbox">
            <van-icon name="plus" />
          </div>
          <div class="my_fontbox">
            <van-icon name="delete-o" />
          </div>
        </div>
      </div>
      <div>

      </div>
      <div class="my_wenbox">
        <div>
          <span>降低温度</span>
          <p>16℃以下将成本降低￥30/m</p>
        </div>
        <div class="my_cha">
          查看更多
        </div>
      </div>
      <div>
        <van-cell title="设备" is-link @click="showPopup" />
        <van-popup v-model:show="show" position="bottom" :style="{ height: '50%' }">
          <div class="my_alertbox">
            <div>
              <span>设备</span>
            </div>
            <div class="my_alert">
              <div class="my_alertitem">
                <img src="../../../../public/font/tou.svg" alt="">
              </div>
              <div class="my_alertitem">
                <img src="../../../../public/font/la.svg" alt="">
              </div>
              <div class="my_alertitem">
                <img src="../../../../public/font/lu.svg" alt="">
              </div>
              <div class="my_alertitem">
                <img src="../../../../public/font/lv.svg" alt="">
              </div>
              <div class="my_alertitem1">
                +
              </div>
            </div>
          </div>
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from '@/router';
import { ref } from 'vue';

const show = ref(false);
const showPopup = () => {
  show.value = true;
};
const text = ref('24.5%')
const rate = ref(60)
const currentRate = ref(0);
const gradientColor = {
  '0%': ' #fb8f66 ',
  '100%': ' #7033ff',
};
const entrance = () => {
  router.push('./Hello')
}
const Power = () => {
  router.push('./Power')
}

</script>

<style scoped lang="scss">
.my_dianbox {
  padding: 1rem;

  .my_xiaobox {
    width: 32.7rem;
    height: 11.1rem;
    margin-left: 1.2rem;
    border-radius: 2.4rem;
    background: #ffffff;
    background-blend-mode: normal;
    box-shadow: 0rem 0.7rem 1.7rem rgba(171, 163, 207, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .my_dian {
      display: flex;
      align-items: center;

      .my_dian1 {
        margin-left: 2rem;

        .my_ri {
          font-size: 1.4rem;
          font-weight: 400;
          color: #ABA3CF;
          line-height: 5rem;
        }
      }
    }

    .van-circle {
      width: 7rem;
      height: 7rem;
    }

    .my_right {
      margin-right: 1rem;
    }
  }

  .my_shishe {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 5rem;

    .my_shifont {
      display: flex;
      align-items: center;

      .my_fontbox {
        margin-left: 1rem;
        width: 3rem;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        background-color: #F6F5FA;
        color: #352C5D;
      }
    }
  }

  .my_wenbox {
    width: 32.7rem;
    height: 8rem;
    border-radius: 2rem;
    margin-left: 1.5rem;
    background-color: #352C5D;
    display: flex;
    color: #FFFFFF;
    align-items: center;
    justify-content: space-around;
    font-size: 1.5rem;

    .my_cha {
      width: 7.8rem;
      height: 3.2rem;
      border-radius: 1.6rem;
      background: linear-gradient(90deg, #fb8f66 0%, #7033ff 100%);
      background-blend-mode: normal;
      font-size: 1.2rem;
      font-weight: 400;
      text-align: center;
      line-height: 3rem;
    }
  }

  .my_alert {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1rem;

    .my_alertitem {
      margin-top: 1rem;
      margin-left: 2rem;
      text-align: center;
      line-height: 7.5rem;
      width: 10rem;
      height: 7.5rem;
      color: #ABA3CF;
      border-radius: 2rem;
      background: #f9f7f7;
      background-blend-mode: normal;
    }

    .my_alertitem1 {
      margin-top: 1rem;
      margin-left: 2rem;
      text-align: center;
      line-height: 7.5rem;
      width: 10rem;
      height: 7.5rem;
      color: #ABA3CF;
      font-size: 3rem;
      border-radius: 2rem;
      background: #f9f7f7;
      background-blend-mode: normal;
      border: 0.1rem dashed;
    }
  }

  .my_alertbox {
    padding: 0.5rem;
  }
}
</style>